<template>
   <nut-navbar title="设定" left-show @click-back="back">
    <template #left>
      <div>返回</div>
    </template>
  </nut-navbar>
    <nut-cell 
      v-for="(deviceSetting, index) in deviceSettings" 
      :key="index" 
      :title="deviceSetting.device_name"
    >
      <template #link>
        <nut-input-number v-model="deviceSetting.packing_limit" @change="updateSetting(deviceSetting.id, deviceSetting.packing_limit)"/>
      </template>
    </nut-cell>
</template>

<script setup>
import { getDeviceSettings, updateDeviceSetting } from '@/api/sqlutil';
import router from '@/router/index';
import { onMounted, ref } from 'vue';
const deviceSettings = ref([]);


const back = () => {
    router.back();
}


const updateSetting = async (id, packing_limit) => {
  try {
    const data = await updateDeviceSetting(id, packing_limit);
    if (data) {
      console.log('Device setting updated successfully');
    } else {
      console.log('Failed to update device setting');
    }
  } catch (error) {
    console.error('Error updating device setting:', error);
  }
};

const fetchDeviceSettings = async () => {
  try {
    const data = await getDeviceSettings();
    if (data) {
      deviceSettings.value = data;
    } else {
      console.log('No data found');
    }
  } catch (error) {
    console.error('Error fetching device settings:', error);
  }
};

onMounted(() => {
  fetchDeviceSettings();
});

</script>
